<template>
  <div class="icons-container">
    <el-row v-if="checkPermission(['department','business','budget'])" class="topRow">
      <el-dropdown>
      <el-button type="primary">
    	选择单位<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
          <template v-for="item in compList">
              <el-dropdown-item @click.native="changeCompany(item)">{{ item.cpName }}</el-dropdown-item>
          </template>
      </el-dropdown-menu>
    </el-dropdown>
     <el-tag>{{companyName}}</el-tag>
    </el-row>
      <el-row v-if="checkPermission(['company'])" class="topRow">
          <el-button style="margin-bottom:20px" type="primary" @click="addData">新增明细表单</el-button>
        </el-row>
    <el-tabs type="border-card">
      <el-tab-pane label="支出预算明细表" align="center">
        <div class="grid">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="number"
              label="序号"
              width="60"
              align="center">
            </el-table-column>
              <el-table-column
                prop="depEconomicsType"
                label="部门经济分类"
                width="120"
                align="center">
              </el-table-column>
                <el-table-column
                  prop="govEconomicsType"
                  label="政府经济分类"
                  width="120"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="totalBudget"
                  label="合计"
                  width="100"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="publicBudget"
                  label="公共预算贷款"
                  width="120"
                  align="center">
                </el-table-column>
                <el-table-column label="专项资金项目" align="center">
                <el-table-column
                  prop="specialFundProvince"
                  label="专项资金项目（省级）"
                  width="170"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="specialFundCenter"
                  label="专项资金项目（中央）"
                  width="170"
                  align="center">
                </el-table-column>
               </el-table-column>
                <el-table-column label="政府基金性拨款" align="center">
                <el-table-column
                  prop="fundProvince"
                  label="政府性基金拨款（省级）"
                  width="180"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="fundCenter"
                  label="政府性基金拨款（中央）"
                  width="180"
                  align="center">
                </el-table-column>
              </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="120"
              align="center">
              <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
               <el-button @click="updateData(scope.row)" type="primary" size="small">编辑</el-button>
            </template>
           </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :title="titleName" :visible.sync="dialogFormVisible">
       <el-form :model="form">
          <el-form-item label="项目名称" :label-width="formLabelWidth">
          <el-select v-model="form.projectThreeTypeId" placeholder="请选择项目名称">
            <el-option v-for="item in projectList" :value="item.id" :label="item.name" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="功能分类" :label-width="formLabelWidth">
          <el-select v-model="form.functionThreeTypeId" placeholder="请选择功能分类">
           <el-option v-for="item in functionList" :value="item.id" :label="item.name" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门经济分类" :label-width="formLabelWidth">
          <el-select v-model="form.depEconomicsTypeId" placeholder="请选择部门经济分类">
           <el-option v-for="item in depList" :value="item.id" :label="item.name" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公共预算贷款" :label-width="formLabelWidth">
          <el-input v-model="form.publicBudget" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="专项资金项目（省级）" :label-width="formLabelWidth">
          <el-input v-model="form.specialFundProvince" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="专项资金项目（中央）" :label-width="formLabelWidth">
          <el-input v-model="form.specialFundCenter" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="政府性基金拨款（省级）" :label-width="formLabelWidth">
          <el-input v-model="form.fundProvince" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="政府性基金拨款（中央）" :label-width="formLabelWidth">
          <el-input v-model="form.fundCenter" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
      </el-dialog>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import { getPayment,deletePayment,getFunctionList,getProjectList,getDepEconomicsType,insertPayment,updatePayment,getAllCompany,getSummary} from '@/api/budget'
export default {
  name: "Icons",
    data() {
      return {
      companyName:"未选择单位",
      compList:[],
      loading: false,
      // 表格组件 列表数据对象
      tableData: [],
      planList: [],
      editRowJson: '',
      titleName:'',
       dialogFormVisible:false,
       dialogTitle:'',
            form: {
              projectThreeTypeId: '',
              functionThreeTypeId: '',
              depEconomicsTypeId: '',
              publicBudget: '',
              specialFundProvince: '',
              specialFundCenter: '',
              fundProvince: '',
              fundCenter: ''
            },
            formLabelWidth: '120px',
            functionList:[],
            projectList:[],
            depList:[],
            summaryId:123
      }
    },
    created() {
    this.initData();
  },
    methods: {
      checkPermission,
      handleClick(row) {
        console.log(row);
        deletePayment(row.id).then(response =>{
          console.log(response)
        })
      },
    initData() {
      if(this.$store.getters.roles[0]==='company'){
       this.getList();
      }
      else{
       this.getAllCompany();
      }
      getFunctionList().then(response =>{
        var listThreeTotal=[];
        var listOne=response.data;
        for(var i=0;i<listOne.length;i++)
        {
          var listTwo=listOne[i].functionTwoTypeDTOList;
          for(var j=0;j<listTwo.length;j++)
          {
            var listThree=listTwo[j].functionThreeTypePOList;
            for(var k=0;k<listThree.length;k++){
              var listThreeEnd=listThree[k];
              listThreeTotal.push(listThreeEnd)
            }
          }
        }
        this.functionList=listThreeTotal
      })
      getProjectList().then(response =>{
        var lisThreeTotal=[];
        var lisOne=response.data;
        for(var i=0;i<lisOne.length;i++)
        {
          var lisTwo=lisOne[i].projectTwoTypeDTOList;
          for(var j=0;j<lisTwo.length;j++)
          {
            var lisThree=lisTwo[j].projectThreeTypePOList;
            for(var k=0;k<lisThree.length;k++){
              var lisThreeEnd=lisThree[k];
              lisThreeTotal.push(lisThreeEnd)
            }
          }
        }
        this.projectList=lisThreeTotal
      })
      getDepEconomicsType().then(response =>{
        var depEconomicsTotal=[];
        var govEconomics=response.data;
        for(var i=0;i<govEconomics.length;i++)
        {
          var depEconomics=govEconomics[i].depEconomicsTypeDTOList;
          for(var j=0;j<depEconomics.length;j++){
            var depEconomicsEnd=depEconomics[j];
            depEconomicsTotal.push(depEconomicsEnd)
          }
        }
        this.depList=depEconomicsTotal
      })
    },
    getAllCompany(){
          getAllCompany(2).then(response=>{
            console.log(response)
			  var companyTotal=[];
			  var department=response.data;
			  for(var i=0;i<department.length;i++)
			  {
			    var company=department[i].companyInfoPOList;
			    for(var j=0;j<company.length;j++){
			      var companyEnd=company[j];
			      companyTotal.push(companyEnd)
			    }
			  }
			  this.compList=companyTotal
			})
     },
    getList() {
      getPayment(this.summaryId).then(response => {
        console.log(response)
        var list1=response.data;
        for(var i=0;i<list1.length;i++)
        list1[i].number=i+1;
        this.tableData = list1;
      })
    },

      handleClose(done) {
        // this.$confirm('确认关闭？')
        //   .then(_ => {
        //     done();
        //   })
        //   .catch(_ => {});
      },

        addData(){
            this.form = {};
            this.dialogFormVisible = true;
            this.titleName ="新增支出明细"
            this.dialogTitle = "addData";
        },

        updateData(row){
            console.log(row)
            this.dialogFormVisible = true;
            this.dialogTitle = "updateData";
            this.titleName ="编辑支出明细"
            this.form = row;
            // this.form.depEconomicsTypeId = row
            // this.form.functionThreeTypeId= row
            // this.form.projectThreeTypeId = row
        },

        submit(){
            this.dialogFormVisible = false;
            if (this.dialogTitle == "addData") {
                insertPayment(this.form).then(response =>{
                })
            } else {
                updatePayment(this.form).then(response =>{
                this.form.total=0
                })
            }
        },
        changeCompany(item){
          console.log(item)
          this.companyName=item.cpName
          getSummary(item.id).then(response =>{
            console.log(response)
            this.summaryId=response.data.id
          })
          this.getList()

        }
   }
 };
</script>

<style lang="scss" scoped>
.icons-container{
  margin: 10px 20px 0;
}
</style>
